<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/public/templateUI/publicStyle.css" />
    <style>
        .btnStyle{
            border-radius: 5px;
        }
    </style>
</head>
<body>
<div style="padding: 20px 50px">
    <button type="button" id="ueditor-imgUpload-Btn" class="layui-btn layui-btn-sm layui-btn-normal">上传视频</button>
    <div style="padding-top: 20px">
        <video id="videoShow" src="" controls style="width: 450px;height: 230px" src=""></video>
    </div>
    <div style="text-align: center;margin-top: 30px">
        <button type="button" class="layui-btn layui-btn-sm confirm layui-btn-normal btnStyle">确定</button>
        <button type="button" class="layui-btn layui-btn-sm cancel layui-btn-primary btnStyle">取消</button>
    </div>
</div>

<script type="text/javascript" src="../internal.js"></script>
<script src="../../third-party/jquery-1.10.2.js"></script>
<script src="/public/templateUI/layui/layui.all.js"></script>
<script type="text/javascript" src="/public/transcode.js"></script>
<script src="/public/ossUploadJs/myOssSdk.js" type="text/javascript" charset="utf-8"></script>
<script src="/public/ossUploadJs/uploadAliyun.js" type="text/javascript" charset="utf-8"></script>
<script>
    var posterImgBase64 = null;
    var uploadInst = null;
    var video_url = null;
    var $ = layui.jquery
        , upload = layui.upload;
    var video_file = null;
    //普通图片上传
    // var posterWidth = 1032;
    // var posterHeight = 405;
    uploadInst = upload.render({
        elem: '#ueditor-imgUpload-Btn'
        , auto: false
        ,headers: {token:localStorage.getItem("token")}
        // , url: host + '/api/Upload/allUpload'
        , url: '/api/Upload/allUpload'
        ,accept: 'file' //普通文件
        ,exts: 'mp4|mov|rmvb|flv' //只允许上传视频
        , choose: function (obj) {
            //预读本地文件示例，不支持ie8
            obj.preview(function(index, file, result) {
                // console.log(result);
                video_file = file;
                var blob = new Blob([file]), // 文件转化成二进制文件
                    url = URL.createObjectURL(blob); //转化成url
                var video = document.createElement('video');
                // video.setAttribute('src','http://hxwzoss.sobeylingyun.com/2020/3/23/678edafa-0abd-612d-1c8c-0753b7483aac.mp4');
                video.setAttribute('src', result);
                video.crossOrigin = "anonymous";
                video.currentTime = 0.1;
                $("#videoShow").attr('src',result)
                // $("#videoShow").attr('src','http://hxwzoss.sobeylingyun.com/2020/3/23/678edafa-0abd-612d-1c8c-0753b7483aac.mp4')
                video.addEventListener("loadeddata", function(_event) {
                    var canvas = document.createElement("canvas");
                    canvas.width = video.videoWidth;
                    canvas.height = video.videoHeight;
                    // console.log(video.videoWidth)
                    // console.log(video.videoHeight)
                    canvas.getContext("2d").drawImage(video, 0, 0, canvas.width, canvas.height);
                    // console.log(canvas.toDataURL("image/png")); //第一帧图片url
                    $("#img").attr('src',canvas.toDataURL("image/png"))
                    posterImgBase64 = canvas.toDataURL("image/png");
                });
                return false
            });
        }
        , done: function (res) {
            // layer.closeAll();
            if(res.code==200){
                // layer.msg("上传成功");
                // video_url = res.data.all_path;
                // posterUpload();

            }else{
                layer.msg(res.msg)
            }
            //上传成功
        }
        , error: function () {
            layer.msg("网络错误，请稍后再试")
        }
    });

    $(".confirm").click(function () {
        if ($("#videoShow").attr('src')==""){
            layer.msg("请先上传视频");
            return false
        }
        var index = layer.load(1, {
            shade: [0.2,'#333333'] //0.1透明度的白色背景
        });
        // uploadInst.upload();
        videoUpload();
        return false
    });
    function videoUpload(){
        // var blob = dataURLtoBlob(posterImgBase64);
        // var file = blobToFile(blob, 'poster_cover'+new Date().getTime()+'.png');
        var imgfile = dataURLtoFile(posterImgBase64,'poster_cover'+new Date().getTime()+'.png')
        // var formData = new FormData();
        // formData.append('file', file);
        GlobalUploadFile(imgfile, 'image', function (res) {
            var poster_url = res.path;
            GlobalUploadFile(video_file, 'video', function (res1) {
                var video_url = res1.path;
                layer.closeAll();
                if(editor.getContent()==""){
                    editor.execCommand('insertHtml','<p style="display:none!important;">插入视频</p>')
                }
                editor.execCommand('insertHtml', '<p><br/></p><p><video style="width: 100%;" controls x-webkit-airplay="true" playsinline="true" x5-playsinline="true" webkit-playsinline="true" poster="'+poster_url+'" src="'+video_url+'"></video></p><p><br/></p>')
                // editor.execCommand('insertHtml', '<img data-width="'+width+'" data-height="'+height+'" style="margin: 10px auto;display: block;max-width: 100%!important;" _src="'+image+'" src="'+image+'">');
                dialog.close();
                // postHttpAjax("/system/system/setBackGroupPic", {BackGroupPic: image})
                // $('#banner_path').attr("src", res.path);
                //$("#path").val(res.path);
            }, function (err) {
                console.log(err)
                layer.closeAll();
                layer.msg('上传文件失败！');
                // layer.msg("网络错误，请稍后再试")
                // layer.closeAll(); //疯狂模式，关闭所有层
            });
        }, function (err) {
            console.log(err)
            layer.closeAll();
            layer.msg('上传文件失败！');
            // layer.msg("网络错误，请稍后再试")
            // layer.closeAll(); //疯狂模式，关闭所有层
        });

        // $.ajax({
        //     url: '/api/Upload/allUpload',
        //     type: 'post',
        //     headers:{
        //         token:window.localStorage.getItem('token')
        //     },
        //     data:formData,
        //     dataType: 'json',
        //     cache : false,
        //     processData : false,
        //     contentType : false,
        //     success: function (res) {
        //         layer.closeAll();
        //         if (res.code==200){
        //             editor.execCommand('insertHtml', '<p><br/></p><p><video style="width: 100%;" controls x-webkit-airplay="true" playsinline="true" x5-playsinline="true" webkit-playsinline="true" poster="'+res.data.all_path+'" src="'+video_url+'"></video></p><p><br/></p>')
        //             dialog.close();
        //         }else{
        //             layer.msg(res.msg)
        //         }
        //     },
        //     error:function(){
        //         layer.msg("网络错误，请稍后重试")
        //     }
        // });
    }


    $(".cancel").click(function () {
        dialog.close();
        return false
    })
    //将base64转换为blob
    function dataURLtoBlob(dataurl) {
        var arr = dataurl.split(','),
            mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]),
            n = bstr.length,
            u8arr = new Uint8Array(n);
        while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
        }
        return new Blob([u8arr], { type: mime });
    };
    function dataURLtoFile(dataurl, filename) {//将base64转换为文件
        var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
        while(n--){
            u8arr[n] = bstr.charCodeAt(n);
        }
        return new File([u8arr], filename, {type:mime});
    };

    //将blob转换为file
    function blobToFile(theBlob, fileName){
        theBlob.lastModifiedDate = new Date();
        theBlob.name = fileName;
        return theBlob;
    }
    // var blob = dataURLtoBlob(base64Data);
    // var file = blobToFile(blob, imgName);
</script>
</body>
</html>